<template>
  <div _tmplitem="68" id="mianformplane">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <formplane
        _tmplitem="67"
        title="模块布局"
        icon="el-icon-share"
        :istitle="true"
      >
        <el-col :lg="24" :md="24" :xs="24">
          <div _tmplitem="58" v-if="readDataPermission.listview_0k9e !== false">
            <el-col :xs="24" :md="24" :lg="24" v-if="deviceMode !== 'Mobile'">
              <el-button
                style="margin-left:5px;margin-top: 5px;"
                type="text"
                :plain="false"
                size="mini"
                icon="el-icon-circle-plus"
                :round="false"
                :circle="false"
                :disabled="false"
                @click="addListViewRow_sys('listview_0k9e')"
              >
                新增
              </el-button>
              <jsonexcel
                _tmplitem="58"
                class="export-excel-wrapper"
                :data="exportexcel.DetailsForm"
                :fields="exportexcel.json_fields"
                :header="exportexcel.title"
                :name="exportexcel.title + '.xls'"
              >
                <el-button
                  style="margin-left:5px;margin-top: 5px;"
                  type="text"
                  :plain="false"
                  size="mini"
                  icon="el-icon-circle-plus"
                  :round="false"
                  :circle="false"
                  :disabled="false"
                  @click="exportListView_sys('listview_0k9e', '子表控件')"
                >
                  导出xls
                </el-button>
              </jsonexcel>
              <el-button
                style="margin-left:5px;margin-top: 5px;"
                type="text"
                :plain="false"
                size="mini"
                icon="el-icon-circle-plus"
                :round="false"
                :circle="false"
                :disabled="false"
                @click="importListView_sys('listview_0k9e', '子表控件')"
              >
                导入xls
              </el-button>
            </el-col>
            <el-col :span="24" v-if="deviceMode !== 'Mobile'">
              <div _tmplitem="58" class="ant-table_container">
                <el-table
                  :data="formData.listview_0k9e"
                  ref="listview_0k9e"
                  style="width: 100%"
                  @row-click="listview_0k9erowclick_sys"
                >
                  <el-table-column
                    prop="input_wfnw"
                    label="单行文本"
                    class-name=""
                    width="150"
                  >
                    <template _tmplitem="53" slot-scope="scope">
                      <el-form-item
                        label-width="0px"
                        :prop="'listview_0k9e.' + scope.$index + '.input_wfnw'"
                        :rules="rules.input_wfnw"
                      >
                        <el-input
                          placeholder="请输入单行文本内容"
                          :disabled="
                            false || !(writeDataPermission.input_wfnw === true)
                          "
                          v-model="scope.row.input_wfnw"
                          maxlength="50"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="input_wmg8"
                    label="单行文本"
                    class-name=""
                    width="150"
                  >
                    <template _tmplitem="55" slot-scope="scope">
                      <el-form-item
                        label-width="0px"
                        :prop="'listview_0k9e.' + scope.$index + '.input_wmg8'"
                        :rules="rules.input_wmg8"
                      >
                        <el-input
                          placeholder="请输入单行文本内容"
                          :disabled="
                            false || !(writeDataPermission.input_wmg8 === true)
                          "
                          v-model="scope.row.input_wmg8"
                          maxlength="50"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="select_p2hs"
                    label="下拉列表"
                    class-name=""
                    width="150"
                  >
                    <template _tmplitem="57" slot-scope="scope">
                      <el-form-item
                        label-width="0px"
                        :prop="'listview_0k9e.' + scope.$index + '.select_p2hs'"
                        :rules="rules.select_p2hs"
                      >
                        <el-select
                          placeholder="请选择下拉列表"
                          :disabled="
                            false || !(writeDataPermission.select_p2hs === true)
                          "
                          v-model="scope.row.select_p2hs"
                        >
                          <el-option
                            v-for="(item, index) in controlData.select_p2hs"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operation"
                    fixed="right"
                    label="操作"
                    class-name=""
                    width="100"
                  >
                    <template _tmplitem="8" slot-scope="scope">
                      <div _tmplitem="8" class="el-input el-input--small">
                        <el-button
                          style="margin-left:5px;"
                          type="text"
                          size="small"
                          icon="el-icon-delete"
                          :plain="false"
                          :round="false"
                          :circle="false"
                          :disabled="false"
                          @click="
                            delListViewRow_sys('listview_0k9e', scope.row)
                          "
                        >
                          删除
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </div>
          <div _tmplitem="65" v-if="readDataPermission.listview_0k9e !== false">
            <el-col :span="24" v-if="deviceMode === 'Mobile'">
              <div
                _tmplitem="65"
                v-for="(rowitem, index) in formData.listview_0k9e"
                :key="index"
                style="width: 98%;padding: 8px;margin-bottom: 10px;               border: 1px solid #d7dae2;               border-radius: 0;    position: relative;"
              >
                <div _tmplitem="65" class="fr-card-index">{{ index + 1 }}</div>
                <div _tmplitem="65" :span="24" style="text-align: right;">
                  <el-button
                    style="margin-left:5px;margin-top: 5px;"
                    type="text"
                    :plain="false"
                    size="mini"
                    icon="el-icon-delete"
                    :round="false"
                    :circle="false"
                    :disabled="false"
                    @click="delListViewRow_sys('listview_0k9e', rowitem)"
                  >
                    删除</el-button
                  >
                </div>
                <el-col :span="24" style="padding:0px">
                  <el-col :span="24" style="height:">
                    <el-form-item
                      label="单行文本"
                      label-width="150px"
                      :prop="'listview_0k9e.' + index + '.input_wfnw'"
                      :rules="rules.input_wfnw"
                    >
                      <el-input
                        placeholder="请输入单行文本内容"
                        :disabled="
                          false || !(writeDataPermission.input_wfnw === true)
                        "
                        v-model="rowitem.input_wfnw"
                        maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding:0px">
                  <el-col :span="24" style="height:">
                    <el-form-item
                      label="单行文本"
                      label-width="150px"
                      :prop="'listview_0k9e.' + index + '.input_wmg8'"
                      :rules="rules.input_wmg8"
                    >
                      <el-input
                        placeholder="请输入单行文本内容"
                        :disabled="
                          false || !(writeDataPermission.input_wmg8 === true)
                        "
                        v-model="rowitem.input_wmg8"
                        maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding:0px">
                  <el-col :span="24" style="height:">
                    <el-form-item
                      label="下拉列表"
                      label-width="150px"
                      :prop="'listview_0k9e.' + index + '.select_p2hs'"
                      :rules="rules.select_p2hs"
                    >
                      <el-select
                        placeholder="请选择下拉列表"
                        :disabled="
                          false || !(writeDataPermission.select_p2hs === true)
                        "
                        v-model="rowitem.select_p2hs"
                      >
                        <el-option
                          v-for="(item, index) in controlData.select_p2hs"
                          :key="index"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
                <div
                  _tmplitem="65"
                  style="clear:both;height:0;font-size: 1px;line-height: 0px;"
                ></div>
              </div>
              <el-col
                :xs="24"
                :md="24"
                :lg="24"
                style="    text-align: center;"
              >
                <el-button
                  style="margin-left:5px;margin-top: 5px;    width: 95%;"
                  type="text"
                  :plain="false"
                  size="mini"
                  icon="el-icon-circle-plus"
                  :round="false"
                  :circle="false"
                  :disabled="false"
                  @click="addListViewRow_sys('listview_0k9e')"
                >
                  新增子表控件
                </el-button>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </formplane>
    </el-form>
    <input
      _tmplitem="68"
      class="file"
      type="file"
      ref="fileExcel"
      accept=".xls,.xlsx"
      style="display: none"
      @change="commonimport_sys($event)"
    />
  </div>
</template>
<script>
import autono from '@/components/autono/index.vue'
import cityselector from '@/components/cityselector/index.vue'
import datarelevance from '@/components/datarelevance/index.vue'
import editor from '@/components/Editor/index.vue'
import locationmap from '@/components/locationmap/index.vue'
import queryrelevance from '@/components/queryrelevance/index.vue'
import signname from '@/components/signname/index.vue'
import upfilescomp from '@/components/upfilescomp/index.vue'
import upimgcomp from '@/components/upimgcomp/index.vue'
import upmanyimgcomp from '@/components/upmanyimgcomp/index.vue'
import jsonexcel from 'vue-json-excel'
import formplane from '@/components/formplane/index.vue'
import layouttable from '@/components/layouttable/index.vue'
export default {
  data() {
    return {
      formData: {
        listview_0k9e: [],
        dellistview_0k9e: [],
        $tableNewId: '',
      },
      deviceMode: 'Mobile',
      fromdialog: {
        fromid: '',
        selectId: '',
        loaddata: '',
      },
      exportexcel: {
        DetailsForm: [],
        json_fields: {},
        title: '',
        cotrlid: '',
      },
      rules: {
        input_wfnw: [],
        input_wmg8: [],
        select_p2hs: [],
      },
      controlData: {
        listview_0k9e: {
          queryparam: {},
          scopedSlots: [
            ['input_wfnw', '单行文本'],
            ['input_wmg8', '单行文本'],
            ['select_p2hs', '下拉列表'],
          ],
          pagination: {},
        },
        select_p2hs: ['选项1', '选项2'],
      },
      selectindex: -1,
      isedit: false,
      selectproperty: '',
      modelfiled: {
        input_wfnw: 'input_wfnw',
        input_wmg8: 'input_wmg8',
        select_p2hs: 'select_p2hs',
      },
      watchdetailfiled: {},
      readDataPermission: {
        listview_0k9e: true,
        input_wfnw: true,
        input_wmg8: true,
        select_p2hs: true,
      },
      writeDataPermission: {
        listview_0k9e: true,
        input_wfnw: true,
        input_wmg8: true,
        select_p2hs: true,
      },
    }
  },
  methods: {
    //系统方法 关闭弹出层的方法
    fromdialogclose_sys(issave) {
      this.$refs.reffromdialog.clasedialog()
      if (
        issave &&
        this.fromdialog.loaddata !== undefined &&
        typeof this.fromdialog.loaddata === 'function'
      ) {
        this.fromdialog.loaddata()
      }
    },
    //系统方法 通用通用导出明细方法
    exportListView_sys(datalistname, title) {
      this.exportexcel.json_fields = {}
      this.controlData[datalistname].scopedSlots.forEach((ee) => {
        this.exportexcel.json_fields[ee[1]] = ee[0]
      })
      this.exportexcel.title = title
      this.exportexcel.DetailsForm = this.formData[datalistname]
    },
    //系统方法 通用通用导出明细方法
    importListView_sys(datalistname, title) {
      this.exportexcel.cotrlid = datalistname
      this.exportexcel.json_fields = {}
      this.controlData[datalistname].scopedSlots.forEach((ee) => {
        this.exportexcel.json_fields[ee[1]] = ee[0]
      })
      this.exportexcel.json_fields['fid'] = 'fid'
      this.exportexcel.title = title
      this.exportexcel.DetailsForm = this.formData[datalistname]
      this.$refs.fileExcel.click()
    },
    //系统方法 通用通用导入明细方法
    commonimport_sys(e) {
      const { files } = e.target
      if (files.length <= 0) {
        return
      } else if (!/.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$message.warning('上传格式不正确，请上传xls或xlsx格式')
        return
      } else {
        this.fileName = files[0].name // 拿到excel文件名
      }
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          // console.log(ev);
          const data = ev.target.result
          const workbook = this.$XLSX.read(data, {
            type: 'binary',
          })

          // console.log(workbook);
          const wsname = workbook.SheetNames[0]
          workbook.Sheets[wsname]['!ref'] = workbook.Sheets[wsname][
            '!ref'
          ].replace('A1:', 'A2:')
          const ws = this.$XLSX.utils.sheet_to_json(workbook.Sheets[wsname], 2)
          if (ws.length > 0) {
            let isEorr = false
            for (let key in this.exportexcel.json_fields) {
              if (ws[0][key] === undefined) {
                isEorr = true
                break
              }
            }
            if (isEorr) {
              this.$message.error('导入xls的模板不正确，请先下载对应模板！')
            }
          }
          for (let i = 0; i < ws.length; i++) {
            if (ws[i].fid !== undefined) {
              const listviewlist = kylinjson.kylinjson({
                path: "$.[?(@.fid=='" + ws[i].fid + "')]",
                json: this.formData[this.exportexcel.cotrlid],
              })
              if (listviewlist.length > 0) {
                listviewlist[0] = this.getexcelrow_sys(ws[i])
              } else {
                this.formData[this.exportexcel.cotrlid].push(
                  this.getexcelrow_sys(ws[i])
                )
              }
            } else {
              this.formData[this.exportexcel.cotrlid].push(
                this.getexcelrow_sys(ws[i])
              )
            }
          }

          // console.log(ws) // 文件中的数据都在这json格式
        } catch (error) {}
      }
      fileReader.readAsBinaryString(files[0])
    },
    //系统方法 通用通用导入明细方法
    getexcelrow_sys(obj) {
      let rowobj = {}
      for (let key in this.exportexcel.json_fields) {
        rowobj[this.exportexcel.json_fields[key]] = obj[key]
      }
      return rowobj
    },
    //系统方法 列表新增方法
    addGridlist_sys(controlId, fromid) {
      if (fromid === undefined || fromid === '' || fromid === null) {
        this.$message.error('找不到表单信息！')
      }
      this.fromdialog.loaddata = this['load' + controlId + '_sys']
      this.fromdialog.selectId = ''
      this.$refs.reffromdialog.opendialog(fromid, '')
    },
    //系统方法 列表新增方法
    updateGridlist_sys(controlId, fromid, rowdata) {
      if (fromid === undefined || fromid === '' || fromid === null) {
        this.$message.error('找不到表单信息！')
      }
      this.fromdialog.loaddata = this['load' + controlId + '_sys']
      this.$refs.reffromdialog.opendialog(fromid, rowdata.fid)
    },
    //系统方法 删除行方法
    delGridlist_sys(controlId, rowdata) {
      this.$confirm('确定删除，删除后将无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$apiComm(this.controlData[controlId].tablename + '.deleteInfo', {
          body: {
            fid: rowdata.fid,
          },
        }).then((res) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
          this['load' + controlId + '_sys']()
          this.$message.success('保存成功！')
        })
      })
    },
    //系统方法 通用提交保存方法
    submitData_sys() {
      // console.log(JSON.stringify(this.formData))
      // return
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return
        const param = {
          body: {
            ...this.formData,
            $fromid: this.fromid,
          },
        }

        this.$message.success('提交内容：' + JSON.stringify(param))
        // this.$apiComm(".SaveDataInfo", param).then(res => {
        //     if (res.code !== 0) {
        //         this.$message.error(res.msg);
        //     }
        //     if(typeof this.dialogclose ==='function'){
        //       this.dialogclose(true)
        //     }
        //     this.$message.success("保存成功！")
        // });
      })
    },
    //系统方法 通用添加明细行方法
    addListViewRow_sys(datalistname) {
      var newrowobj = {}
      this.controlData[datalistname].scopedSlots.forEach((ee) => {
        newrowobj[ee[0]] = ''
      })
      this.formData[datalistname].push(newrowobj)
    },
    //系统方法 通用删除明细方法
    delListViewRow_sys(datalistname, rows) {
      if (rows.fid !== undefined && rows.fid !== '') {
        this.formData['del' + datalistname].push(rows.fid)
      }
      this.formData[datalistname].splice(
        this.formData[datalistname].indexOf(rows),
        1
      )
    },
    //系统方法 判断url是否传入ID，如果传入给各个控件赋值
    getTableNewId_sys() {
      const tablefid = this.$query('tablefid')
      let newbusinessid = this.businessid
      if (tablefid !== null && tablefid !== '') {
        newbusinessid = tablefid
      }
      if (
        newbusinessid !== null &&
        newbusinessid !== undefined &&
        newbusinessid.trim() !== '' &&
        newbusinessid.trim() !== '0'
      ) {
        this.formData.$tableNewId = newbusinessid
        const param = {
          body: {
            fid: newbusinessid,
          },
        }
        this.$apiComm('.getDataInfo', param).then((res) => {
          if (res.code === 0) {
            this.isedit = true
            for (let key in this.formData) {
              if (res.data[key] !== undefined && res.data[key] !== null) {
                if (
                  typeof res.data[key] === 'string' &&
                  ((res.data[key].indexOf('[') >= 0 &&
                    res.data[key].indexOf(']') >= 0) ||
                    (res.data[key].indexOf('{') >= 0 &&
                      res.data[key].indexOf('}') >= 0))
                ) {
                  try {
                    this.formData[key] = JSON.parse(res.data[key])
                  } catch {
                    this.formData[key] = res.data[key]
                  }
                } else {
                  this.formData[key] = res.data[key]
                }
              }
            }
          }
        })
      } else {
        // this.$getNewId().then(res=>{
        //     if(res.code===0){
        //
        //       this.formData.$tableNewId=res.data
        //     }
        // })
      }
    },
    //系统方法返回
    goBack_sys() {
      history.go(-1)
    },
    //系统方法页面加载方法
    funmounted_sys() {
      if (this.deviceMode !== 'dialog') {
        const docWidth = document.body.clientWidth

        if (docWidth < 1024) {
          this.deviceMode = 'Mobile'
        } else {
          this.deviceMode = 'pc'
        }
      }
      this.getTableNewId_sys() ///解决手机端 文本框输入时被键盘挡住问题
      const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      window.addEventListener('resize', () => {
        if (this.deviceMode !== 'dialog') {
          const docWidth = document.body.clientWidth

          if (docWidth < 1024) {
            this.deviceMode = 'Mobile'
          } else {
            this.deviceMode = 'pc'
          }
        }
        const nowClientHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        if (clientHeight - nowClientHeight > 60) {
          //因为ios有自带的底部高度
          //键盘弹出的事件处理
          if (document.getElementById('maincontent') !== null) {
            document.getElementById('maincontent').classList.add('focusState')
          }
        } else if (document.getElementById('maincontent') !== null) {
          //键盘收起的事件处理
          document.getElementById('maincontent').classList.remove('focusState')
        }
      })
      this.loadlistview_0k9e_sys()
    },
    //子表[子表控件]数据加载事件
    loadlistview_0k9e_sys() {
      if (
        this.formData.$tableNewId != null &&
        this.formData.$tableNewId != ''
      ) {
        const param = {
          body: {
            $tableNewId: this.formData.$tableNewId,
          },
        }
        this.$apiComm('listview_0k9e.querylist', param).then((res) => {
          if (res.code != 0) {
            this.$message.error(res.msg)
            return
          }
          this.formData.listview_0k9e = res.data.list
        })
      }
    },
    //子表[子表控件]单机行事件
    listview_0k9erowclick_sys(rows, column, event) {
      this.selectproperty = column === undefined ? undefined : column.property
      this.selectindex = this.formData.listview_0k9e.indexOf(rows)
    },
  },
  watch: {},
  props: ['businessid', 'IsPower', 'fromstatus', 'fromid', '$user'],
  mounted() {
    this.funmounted_sys()
  },
  components: {
    autono,
    cityselector,
    datarelevance,
    editor,
    locationmap,
    queryrelevance,
    signname,
    upfilescomp,
    upimgcomp,
    upmanyimgcomp,
    jsonexcel,
    formplane,
    layouttable,
  },
}
</script>
<style scoped>
.fr-card-index {
  position: absolute;
  padding-left: 4px;
  padding-right: 6px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 3px;
  background-color: rgba(0, 0, 0, 0.36);
  font-size: 8px;
  color: #fff;
}

.border-title {
  font-size: 16px !important;
  margin-bottom: 5px;
}

.required:before {
  content: '*';
  color: #c80000;
  font-size: 12px;
  vertical-align: top;
  display: inline-block;
  width: 10px;
  height: 10px;
  top: 2px;
  position: absolute;
}

.el-input__inner {
  height: 35px;
  line-height: 35px;
}

.filterbottom {
  margin-top: 8px;
  margin-left: 15px;
  margin-right: 10px;
}

.filterbottom button {
  float: right;
  margin-right: 10px;
  margin-bottom: 20px;
}

@media screen and (min-width: 1024px) {
  .maincontent {
    margin-left: calc((100% - 1024px) / 2);
  }
}

@media screen and (max-width: 1024px) {
  .el-radio {
    width: 100%;
  }

  .el-checkbox {
    width: 100%;
  }

  .buttongroup {
    width: 100%;
  }

  .buttongroup button {
    width: 50%;
  }
}

body {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  -webkit-appearance: none;
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  height: 5px;
  border: 1px solid transparent;
  border-top: 0;
  border-bottom: 0;
  border-radius: 6px;
  background-color: #ccc;
  background-clip: padding-box;
}

.focusState {
  position: absolute;
}

.mianfromplane[div1668948328000_32807] .cell {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}

.mianfromplane[div1668948328000_32807] .el-form-item__label {
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
}

.mianfromplane[div1668948328000_32807] .el-table th.required > div::before {
  background-color: #fff;
}

.clearbottom {
  clear: both;
  height: 50px;
  font-size: 1px;
  line-height: 0px;
}

.footer {
  width: 100%;
  height: 45px;
  position: fixed;
  bottom: 0;
  background: white;
  border-top: 1px solid #dcdfe6;
  left: 0px;
  right: 0px;
}

.footer .item:first-child {
  width: 70%;
}

.footer .item {
  float: left;
  width: 30%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-right: 1px solid #dcdfe6;
}

.footer i {
  font-size: 18px;
  padding: 5px;
}

.ishidetitle .ctrl-title {
  display: none;
}

.ishidetitle .ctrl-content {
  float: left;
  width: 100% !important;
  line-height: 42px;
  margin-left: 0px;
}

.ctrltitle {
  display: flex;
}

.ctrltitle .ctrl-title {
  width: 80px;
  float: left;
  line-height: 42px;
  padding-left: 5px;
}

.ctrltitle .ctrl-content {
  float: left;
  width: calc(100% - 100px);
  line-height: 42px;
}

.fr-card-row {
  width: calc(100% - 33px);
  padding: 8px;
  margin: 8px;
  margin-bottom: 10px;
  border: 1px solid #d7dae2;
  border-radius: 0;
  position: relative;
}

.export-excel-wrapper {
  display: initial;
}

.layouttable {
  width: 100%;
  float: left;
  /* margin-top: 5px; */
}

.layouttable .layouttable-row {
  height: 100%;
  position: relative;
  /* top: 5px;
  margin: 0px 5px; */
  display: flex;
}

.layouttable .layouttable-row .layouttable-item {
  width: 20%;
  height: 100%;
  position: relative;
  float: left;
}

.layouttable .layouttable-row .layouttable-item .formplane {
  border: 0px solid #d9d9d9;
}

@media only screen and (min-width: 1024px) {
  .layouttable-row .layouttable-item {
    width: var(--pcwith) !important;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 767px) {
  .layouttable-row .layouttable-item {
    width: var(--ipadwith) !important;
  }
}

@media only screen and (max-width: 767px) {
  .layouttable-row .layouttable-item {
    width: var(--mobilewith) !important;
  }
}
</style>
